<template>
	<view class="">
		<!-- <cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">索引</block>
		</cu-custom> -->
		<!-- 前档 -->
		<view class="gear radius shadow bg-white padding-xs">
			<view class="ahead">
				<view class="ahead-title fl">前档</view>
				<view class="content fl">
					<button @click="changeAhead()" class="ahead-btn">{{selectedFront.label}}</button>
				</view>
				<view class="ahead-price fr">¥ {{selectedFront.price}}</view>
				<!-- 图片 -->
				<image class="ahead-img" src="/static/car_front.png"></image>
			</view>
		</view>

		<!-- 侧后档 -->
		<view class="gear radius shadow bg-white padding-xs">
			<view class="back">
				<view class="back-title fl">侧后挡</view>
				<view class="content fl">
					<button @click="changeBack()" class="back-btn">{{selectedBack.label}}</button>
				</view>
				<view class="back-price fr">¥ {{selectedBack.price}}</view>
				<!-- 图片 -->
				<image class="back-img" src="/static/car_back.png"></image>
			</view>
		</view>
		
		<!-- 前档列表 -->
		<u-select v-model="ahead_show" mode="single-column" :list="ahead_list" @confirm="confirmFront"></u-select>
		
		<!-- 后档列表 -->
		<u-select v-model="back_show" mode="single-column" :list="back_list" @confirm="confirmBack"></u-select>

		<view class="foot">
			<view class="order">
				<view class="order-title">订单总价:<text class="total-price">¥ {{(selectedFront.price)+(selectedBack.price)}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// StatusBar: this.StatusBar,
				// CustomBar: this.CustomBar,
				current: 0,
				currentText: ['五座轿车或SUV','六座及以上SUV或MPV'],
				ahead_show: false,
				ahead_list: [],
				back_show:false,
				back_list: [],
				selectedFront:{
					label:'类型：--请选择--',
					price: 0					
				},
				selectedBack:{
					label:'类型：--请选择--',
					price: 0	,
				},
			}
		},
		onLoad(option) {
			console.log(this.selectedFront);
			this.current = option.current //接收路由参数
			this.getAllList();
		},
		methods: {
			async getAllList(){
				this.ahead_list = [];
				let res = await this.$api.getList({
					model:'wprice',
					field:'product_type',
					where:"`car_type` = '" + this.currentText[this.current] + "' AND `place` = '前挡'"
				});
				if(res.code){
					let i = 1;
					for(let dt in res.data){
						this.ahead_list.push({
							value: ++i,
							label: res.data[dt],
							price: 0
						})
					}
				}
				this.back_list = [];
				let res2 = await this.$api.getList({
					model:'wprice',
					field:'product_type',
					where:"`car_type` = '" + this.currentText[this.current] + "' AND `place` = '侧后挡'"
				});
				if(res2.code){
					let i = 1;
					for(let dt in res2.data){
						this.back_list.push({
							value: ++i,
							label: res2.data[dt],
							price: 0
						})
					}
				}
			},
			async confirmFront(e){
				this.selectedFront = e[0];
				//查询价格
				let res = await this.$api.getArchives({
					model:21,
					channel:57,
					condition:"`car_type` = '" + this.currentText[this.current] + "' AND `place` = '前挡' AND `product_type` = '" + this.selectedFront.label + "'"
				});
				if(res.code){
					if(res.data.archivesList.length > 0){
						this.selectedFront.price = parseFloat(res.data.archivesList[0].price);
						console.log(this.selectedFront.price);
					}
					else{
						uni.showToast({
							title:'没有对应的报价信息',
							icon:'none'
						});
					}
					this.$forceUpdate();
				}
			},
			async confirmBack(e){
				this.selectedBack = e[0];
				//查询价格
				let res = await this.$api.getArchives({
					model:21,
					channel:57,
					condition:"`car_type` = '" + this.currentText[this.current] + "' AND `place` = '侧后挡' AND `product_type` = '" + this.selectedBack.label + "'"
				});
				if(res.code){
					if(res.data.archivesList.length > 0){
						this.selectedBack.price = parseFloat(res.data.archivesList[0].price);
					}
					else{
						uni.showToast({
							title:'没有对应的报价信息',
							icon:'none'
						});
					}
					this.$forceUpdate();
				}
			},
			changeAhead(){
				this.ahead_show=true;
			},
			changeBack(){
				this.back_show=true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gear {
		width: 95%;
		height: 500upx;
		margin: 45upx 20upx;
		text-align: center;
		border: 2upx solid grey;
	}

	.ahead,
	.back {
		/* border: 2upx solid red; */
		height: 150upx;
		line-height: 150upx;
	}

	.ahead-title,
	.back-title {
		font-size: 30upx;
		margin-left: 30upx;
	}

	.content {
		/* border: 2upx solid red;	 */
	}

	.ahead-btn,
	.back-btn {
		width: 360upx;
		margin-left: 80upx;
		margin-top: 30upx;
	}

	.ahead-price,
	.back-price {
		font-size: 30upx;
		padding-right: 30upx;
	}

	.ahead-img,
	.back-img {
		width: 60%;
		padding-top: 70upx;
		height: 250upx;
		/* border: 2upx solid red; */
	}

	.foot {}

	.order {
		font-size: 30upx;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 75upx;
		text-align: center;
	}
	.total-price{
		margin-left: 20upx;
	}
</style>
